<template>
 <el-container>
      <el-header height = '80px' >
            <div class="header">
                <div class="nav-left">
                    <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg" alt="">
                </div>
                <div class="nav-center">
                  	<ul>
                  		<li v-for='(list,index) in headerlist' :key="list.item">
                  			<a :href="list.link" :class="check(list.link)?'current':''">
                  			 {{list.name}}
                        </a>
                  		</li>
                  	</ul>
                </div>
                
                <div class="nav-right " v-if="token" @mouseenter = 'enterHandler' @mouseleave ='leaveHandler'>
                  <span class = 'el-dropdown-link'>学习中心</span>
                 	<span class="user">{{this.user_name}}</span>
                 	<img src="../../assets/logo@2x.png" alt="">
                  <ul class="my_account" v-show="isShow">
                      <router-link to="/my">
                      <li>
                        我的账户
                        <i>></i>
                      </li>
                      </router-link>
                      <router-link to="/my/order">
                      <li>
                        我的订单
                        <i>></i>
                      </li>
                      </router-link>
                      <li>
                        我的优惠券
                        <i>></i>
                      </li>
                      <li>
                        我的消息<span class="msg">(44)</span>
                        <i>></i>
                      </li>
                      <router-link to="/cart">
                      <li>

                       购物车<span class="count">{{$store.state.cart.count}}</span>
                        <i>></i>
                      </li>
                      </router-link>
                      <li @click="logout">
                       退出
                        <i>></i>
                      </li>
                  </ul>
                </div>
                <div class="nav-right" v-else>
                  <router-link  to="/login">登录</router-link>
                  &nbsp;| &nbsp;
                  <router-link  to="/register">注册</router-link >

                </div>
            </div>
      </el-header>
    </el-container>


</template>

<script>
export default {

  name: 'LuffyHeader',
  data() {
      return {
        // 设置一个登录标识，表示是否登录
        token: sessionStorage.token || localStorage.token,
        user_name: sessionStorage.user_name || localStorage.user_name,
        user_id: sessionStorage.user_id || localStorage.user_id,
        headerlist:[],
        isShow:false
      }
  },
  created() {
    //获取导航栏
    this.$axios.get(this.$settings.Host +'/nav/')
      .then(res=>{
        console.log(res.data);
        this.headerlist = res.data
      })
      .catch(err=>{
        console.log(err.response)
      })
  },
  methods:{
    check(link){
      return link == window.location.pathname
      },
    enterHandler(){
      this.isShow = true;
    },
    leaveHandler(){
      this.isShow = false;
    },
    logout(){

        this.token = false;
        this.user_id=false;
        this.user_name=false;

        sessionStorage.removeItem("token");
        sessionStorage.removeItem("user_id");
        sessionStorage.removeItem("user_name");

        localStorage.removeItem("token");
        localStorage.removeItem("user_id");
        localStorage.removeItem("user_name");

         let _this = this;
        _this.$alert('退出登录成功!', '路飞学城', {
          callback(){
            _this.$router.push("/");
          }
        });
      },
  }


};
</script>

<style lang="css" scoped>
.el-header{
  border-bottom: #c9c9c9;
  box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
}
.header{
  width: 1200px;
  height: 80px;
  line-height: 80px;
  margin: 0 auto;
}
.nav-left{
  float: left;
 margin-top: 10px;
}
.nav-center{
  float: left;
  margin-left: 100px;

}
.nav-center ul{
	overflow: hidden;
}
.nav-center  ul li{
	float: left;
	margin: 0 5px;
	/*width: 100px;*/
	padding: 0 20px;
	height: 80px;
	line-height: 80px;
	text-align: center;
}
.nav-center ul li a{
	color: #4a4a4a;
	width: 100%;
	height: 60px;
	display: inline-block;

}
.nav-center ul li a.current{
	    color: #4a4a4a;
    	     border-bottom: 4px solid #ffc210;
}
/*.nav-center ul li a:hover{*/
/*	color: #B3B3B3;*/
/*}*/

.nav-right{
  float: right;
  position: relative;
  z-index: 100;
  
}

.nav-right span{
  cursor: pointer;
}
.nav-right .user{
	margin-left: 15px;
}
.nav-right img{
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	margin-left: 15px;
}
.nav-right  ul{
  position: absolute;
  width: 221px;
  z-index: 100;
  font-size: 12px;
  top: 80px;
  background: #fff;
  border-top: 2px solid #d0d0d0;
    box-shadow: 0 2px 4px 0 #e8e8e8;
}
.nav-right ul li{
    height: 40px;
    color: #4a4a4a;
    padding-left: 30px;
    padding-right: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all .2s linear;
}
.nav-right ul li span.msg{
  margin-left: -80px;
  color: red;
}
.nav-right ul li span.count{
  margin-left: -100px;
  color: red;
}

</style>
